<template>
    <div class="ComplexOfficeBuilding">
        <el-form
            :inline="true"
            :model="formInline"
            class="demo-form-inline">
            <el-form-item label="隐患名称">
                <el-input v-model="formInline.riskName" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="隐患等级">
                <el-select v-model="formInline.riskLevel" placeholder="全部">
                    <el-option label="全部" value=""></el-option>
                    <el-option label="一般" value="一般"></el-option>
                    <el-option label="较大" value="较大"></el-option>
                    <el-option label="重大" value="重大"></el-option>
                    <el-option label="特大隐" value="特大"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="整改进度">
                <el-select v-model="formInline.Status" placeholder="全部">
                    <el-option label="全部" value=""></el-option>
                    <el-option label="待整改" value="待整改"></el-option>
                    <el-option label="整改中" value="整改中"></el-option>
                    <el-option label="整改完成" value="整改完成"></el-option>
                    <el-option label="验收通过" value="验收通过"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="button" @click="onSubmit"><i class="el-icon-search"></i> 查询</el-button>
                <el-button type="button" @click="reset" ><i class="el-icon-refresh-right"></i>重置</el-button>
            </el-form-item>
        </el-form>
        <el-table
            :data="list"
            style="width: 100%">
            <el-table-column
                prop="id"
                label="序号"
            >
            </el-table-column>
            <el-table-column
                prop="risksName"
                label="隐患名称/标题"
            >
            </el-table-column>
            <el-table-column
                prop="department"
                label="所属部门"
            >
            </el-table-column>
            <el-table-column
                prop="location"
                label="详细位置"
            >
            </el-table-column>
            <el-table-column
                prop="name"
                label="上报人"
            >
            </el-table-column>
            <el-table-column
                prop="reporttime"
                label="上报时间"
            >
                <template slot-scope="scope"> {{ new Date(scope.row.reporttime).toLocaleString() }}</template>
            </el-table-column>
            <el-table-column
                prop="risksLevel"
                label="隐患等级"
            >
            </el-table-column>
            <el-table-column
                prop="risksType"
                label="隐患类别">
            </el-table-column>
            <el-table-column
                prop="status"
                label="整改状态">
            </el-table-column>
            <el-table-column
                label="操作">
                <template slot-scope="scope">
                    <el-button
                        type="text"
                    >
                        <router-link :to="{path:'/risk/RiskDetail',query: {id:scope.row.id}}">查看详情</router-link>
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="block">
            <el-pagination
                style="text-align: center"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page=current
                :page-sizes="[5, 10, 20, 30]"
                :page-size=limit
                layout="total, sizes, prev, pager, next, jumper"
                :total=total>
            </el-pagination>
        </div>
    </div>
</template>

<script>
import axios  from "axios";
export default {
    name:'ComplexOfficeBuilding',
    data() {
        return {
            list: null, //当前显示
            total: 0, //总条数
            current: 1, //当前显示页码
            limit:5,
            formInline: {
                Status:'',
                riskLevel:'',
                riskName:'',
            },
            tableData: [{
                "id": '',
                "risksName": "",
                "department": "",
                "location": "",
                "name": "",
                "reporttime": '',
                "risksLevel": "",
                "risksType": "",
                "status": ""
            }]
        }
    },
    mounted() {
        this.init()
    },
    methods: {
        // 搜索按钮
        onSubmit() {
            this.$axios({
                url:'/queryRisksByCondition/1/5',
                params:{
                    department:'综合办公楼',
                    Status:this.formInline.Status,
                    riskLevel:this.formInline.riskLevel,
                    riskName:this.formInline.riskName,
                }
            }).then((res)=>{
                if(res.data.code==200){
                    this.tableData=res.data.data
                    this.total=res.data.data.length;
                    this.list = this.tableData.slice((this.current-1)*this.limit,this.current*this.limit)
                }
            })
        },
        // 重置按钮
        reset(){
            this.formInline={
                Status:'',
                riskLevel:'',
                riskName:'',
            }
            this.init()
        },
        // 初始渲染列表
        init(){
            this.$axios({
                url:'/risk/1/5',
                params:{
                    department:'综合办公楼'
                }
            }).then((res)=>{
                console.log(res)
                if(res.data.code==200){
                    this.tableData=res.data.data
                    this.total=res.data.data.length;
                    this.list = this.tableData.slice((this.current-1)*this.limit,this.current*this.limit)
                }else {
                    this.$message.error('数据加载失败')
                }
            })
        },
        // 分页
        handleSizeChange(limit) {
            if(this.tableData){
                if (limit){
                    this.limit=limit;
                }
                this.list=this.tableData.slice((this.current-1)*this.limit,this.current*this.limit)
            }
        },
        handleCurrentChange(current) {
            if(this.tableData){
                if(current){
                    this.current=current;
                }
                this.list=this.tableData.slice((this.current-1)*this.limit,this.current*this.limit)
            }
        },
    }
}
</script>

<style lang="less" scoped>
a {
    text-decoration: none;
    color: #0a92fa;
}
.ComplexOfficeBuilding {
    text-align: left;
    i {
        color: #0A92FA;
        font-weight: bold;
        vertical-align: middle;
        margin-right: 5px;
    }
    .block {
        z-index: 500;
        position: fixed;
        bottom: 60px;
        left: 40%;
    }
    .el-form-item {
        margin-right: 40px;
    }
}
</style>